<template>
  <div>
    <!--    面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card :style="{height:height}">
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog" style="margin-bottom: 10px">添加分类</el-button>
        </el-col>
      </el-row>
<!--      表格-->
<!--      是否有效-->
      <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
        <template slot="isOk" slot-scope="scope" >
          <i class="el-icon-success" v-if="scope.row.cat_deleted == false" style="color: lightgreen"></i>
          <i class="el-icon-error" v-else style="color: lightgreen"></i>
        </template>
<!--排序-->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level==1">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <!--操作-->
        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialogVisible(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </tree-table>
<!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
<!--添加分类-->
    <el-dialog
      title="添加分类"
      :visible.sync="addCateDialogVisible"
      width="50%"
      @close="addCateFormClosed">
      <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
          <el-cascader
            v-model="selectKeys"
            expand-trigger="hover"
            :options="parentCatList"
            :props="cascaderProps"
            @change="parentCateChange" clearable ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
<!--编辑分类-->
    <el-dialog
      title="编辑分类"
      :visible.sync="editCateDialogVisible"
      width="50%"
      @close="editCateFormClosed">
      <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="100px">
        <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
          <el-cascader
            v-model="editSelectKeys"
            expand-trigger="hover"
            :options="parentCatList"
            :props="editCascaderProps"
            @change="editParentCateChange" clearable ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Cate",
  data(){
    return{
      editCateDialogVisible:false,//编辑分类
      addCateDialogVisible:false,//添加分类对话框
      height:0,
      cateList:[],//列表数据
      queryInfo:{
        type:3,
        pagenum:1,
        pagesize:5
      },
      total:0,
      columns:[
        {
          label:'分类名称',
          prop:'cat_name',
        },
        {
          label:'是否有效',
          type:'template',
          template:'isOk',
        },
        {
          label:'排序',
          type:'template',
          template:'order',
        },
        {
          label:'操作',
          type:'template',
          template:'opt',
        },
      ],
      // 分类表单
      addCateForm:{
        cat_name:'',
        cat_pid:0,
        cat_level:0,//0是一级、1是2级、2是三级、默认一级
      },
      // 分类表单规则
      addCateFormRules:{
        cat_name:[
          {required:true,message:'请输入分类名称',trigger:'blur'}
        ]
      },
      // 父级分类列表
      parentCatList:[],
      cascaderProps:{
        value:'cat_id',
        label:'cat_name',
        children:'children'
      },
      selectKeys:'',
      editCateForm:{},
      editCateFormRules:{
        cat_name:[
          {required:true,message:'请输入分类名称',trigger:'blur'}
        ]
      },
      editSelectKeys:'',
      editCascaderProps:{
        value:'cat_id',
        label:'cat_name',
        children:'children'
      },
    }
  },
  methods:{
    //获取商品分类数据
    getCateList(){
      this.$shop.get('categories',{params:this.queryInfo}).then(res=>{
        if(res.data.meta.status!==200){
          return this.$message.error('查询商品分类数据失败')
        }
        this.cateList = res.data.data.result;
        this.total = res.data.data.total
      })
    },
    // 监听pagesize事件
    handleSizeChange(newSize){
      this.queryInfo.pagesize = newSize;
      this.getCateList();
    },
    //监听pagenum的改变
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage;
      this.getCateList();
    },
    //添加分类弹窗
    showAddCateDialog(){
      this.getParentCatList();
      this.addCateDialogVisible = true
    },
    // 获取父级分类列表
    getParentCatList(){
      return new Promise((resolve => {
        this.$shop.get('categories',{params:{type:2}}).then(res=>{
          if(res.data.meta.status !==200){
            return this.message.error('获取父级数据失败')
          }
          this.parentCatList = res.data.data;
          console.log(this.parentCatList)
          resolve();
        })
      }))
    },
    // 选择项变化触发
    parentCateChange(){
      if(this.selectKeys.length>0){
        this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length-1];
        this.addCateForm.cat_level = this.selectKeys.length;
        return
      }else {
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
      }
    },
    // 添加分类
    addCate(){
      this.$refs.addCateFormRef.validate(valid=>{
        if(!valid) return;
        this.$shop.post('categories',this.addCateForm).then(res=>{
          if(res.data.meta.status!==201){
            return this.$message.error('添加分类失败')
          }
          this.$message.success('添加分类成功');
          this.getCateList();
          this.addCateDialogVisible = false;
        })
      })
      this.addCateDialogVisible = false
    },
    addCateFormClosed(){
      this.$refs.addCateFormRef.resetFields();
      this.selectKeys = [];
      this.addCateForm.cat_level = 0;
      this.addCateForm.cat_pid = 0;
    },
    // 显示编辑
    showEditCateDialogVisible(scope){
      this.editCateForm =  scope
      this.getParentCatList();
      this.editSelectKeys = this.parentCatList[scope.cat_pid];
      this.editCateDialogVisible = true;
    },
    editCateFormClosed(){
      this.$refs.editCateFormRef.resetFields();
    },
    editParentCateChange(){
      if(this.editSelectKeys.length>0){
        this.editCateForm.cat_pid = this.editSelectKeys[this.editSelectKeys.length-1];
        this.editCateForm.cat_level = this.editSelectKeys.length;
        return
      }else {
        this.editCateForm.cat_pid = 0;
        this.editCateForm.cat_level = 0;
      }
    },
    editCate(){

    },
  },
  created() {
    this.getCateList();
    // 获取屏幕高度
    this.height = document.documentElement.clientHeight-115+'px';
  },
}
</script>

<style scoped>

</style>
